<template>
	<view class="plantingMain">
		<view class="title">信息填写</view>
		<view class="textView">
			<text class="label">{{userType === 1 ?'种植地区' :'经营地区'}}</text>
			<input :placeholder="userType === 1 ?'请填写您的种植地区' :'请填写您的经营地区'" type="text" errorMessage v-model="growing"
				@focus="onSelect" />
		</view>
		<view class="textView" v-if="userType === 1">
			<text class="label">详细种植地址</text>
			<input placeholder="请填写您的详细种植地址" type="text" errorMessage v-model="areaAddress" />
		</view>
		<view class="textView" v-if="userType === 1">
			<text class="label">种植面积(亩)</text>
			<view class="trafficker_list_bottom">
				<!-- <input placeholder="填写您的种植面积(亩)" type="number" errorMessage v-model="areaValue" focus />
				<text class="trafficker_list_tel_text">亩</text> -->
				<!-- <uni-data-select v-model="acreage" :localdata="range"></uni-data-select> -->
				<picker model="acreage" :range="list" @change="onChange">
					<view class="picker">
						{{!selectedValue?'请选择您的种植面积': selectedValue}}
					</view>
				</picker>

			</view>
		</view>
		<view class="textView">
			<text class="label">姓名</text>
			<input type="text" placeholder="请填写您的姓名" errorMessage v-model="userName" focus />
		</view>
		<view class="textView">
			<text class="label">手机号</text>
			<input type="number" placeholder="请填写您的手机号" errorMessage v-model="userPhone" focus />
		</view>
		<text class="bottom-text">为了更精准的向您推荐,优化您的体验,请准确填写信息。</text>
		<view class="mainItem" @click="onSave">提交</view>
		<!-- 选择地址 -->
		<mpvue-city-picker ref="mpvueCityPicker" :province="province" :city="city" :area="area"
			:pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
	export default {
		props: {
			userType: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				province: [],
				city: [],
				selectedValue: '',
				range: [{
						value: '10',
						text: '1亩'
					},
					{
						value: '20',
						text: '小于5亩'
					},
					{
						value: '30',
						text: '小于10亩'
					}
				],
				list: ['1亩', '小于5亩', '小于10亩'],
				area: [],
				cityPickerValueDefault: [],
				growing: '', //种植地区
				areaAddress: '', //详情地址
				areaValue: '', // 种植面积  
				userName: '', // 姓名
				userPhone: '', //  手机号 
				provinceId: '',
				acreage: '',
				cityId: '',
				regionId: '',
				code: ''
			}
		},
		components: {
			mpvueCityPicker
		},
		created() {
			this.getRegionData()
			wx.login({
				success: res => {
					this.code = res.code;
					// uni.setStorageSync('AuthCode', res.code);
					console.log(res, '123451234微信登录返回12345432123')
				}
			})
		},

		methods: {
			onChange(e) {
				console.log(e, 'eee')
				this.selectedValue = this.list[e.detail.value];
				let row = this.range.filter(val=>val.text == this.selectedValue)
				this.acreage = row[0].value
			},
			// 获取省市区
			getRegionData() {
				let self = this;
				self._post('settings/getRegion', {}, function(res) {
					self.province = res.data[0];
					self.city = res.data[1];
					self.area = res.data[2];
					self.cityPickerValueDefault = [0, 0, 0]
				});
			},
			checkPhone(phone) {
				return /^1(3|4|5|6|7|8|9)\d{9}$/
					.test(phone)
			},
			/*确定选择的省市区*/
			onConfirm(e) {
				console.log(e, '234563')
				this.growing = e.label;
				this.provinceId = e.cityCode[0];
				this.cityId = e.cityCode[1];
				this.regionId = e.cityCode[2];
			},
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker && this.$refs.mpvueCityPicker.show();
			},
			onSelect() {
				uni.hideKeyboard();
				this.$refs.mpvueCityPicker && this.$refs.mpvueCityPicker.show();
			},
			onSave() {
				const $this = this
				const postData = {
					appId: $this.getAppId(),
					mobile: $this.userPhone,
					userType: $this.userType,
					realName: $this.userName,
					varirty: '',
					areaCode: this.provinceId + ',' + this.cityId + ',' + this.regionId,
					area: this.growing,
					areaAddress: this.areaAddress,
					acreage: $this.acreage,
					authCode: this.code,
					salesPersonId: uni.getStorageSync('shopUserId') || ''
				}
				//验证地区
				if (!postData.area) {
					const msg = ($this.userType === 1 ? '填写您的种植地区' : '填写您的经营地区')
					uni.showToast({
						title: msg,
						icon: 'error'
					})
					return
				}
				if (!postData.realName) {
					uni.showToast({
						title: '请填写您的姓名',
						icon: 'error'
					})
					return
				}
				if (!postData.mobile) {
					uni.showToast({
						title: '请填写您的手机号',
						icon: 'error'
					})
					return
				}
				//验证手机号合法性
				if (!$this.checkPhone(postData.mobile)) {
					uni.showToast({
						title: '手机号不合法',
						icon: 'error'
					})
					return
				}
				if ($this.userType === 1) {
					if (!postData.acreage) {
						uni.showToast({
							title: '填写您的种植面积',
							icon: 'error'
						})
						return
					}
					if (!postData.areaAddress) {
						uni.showToast({
							title: '填写您的种植地区详细地址',
							icon: 'error'
						})
						return
					}
				}
				console.log('提交数据', postData)
				$this._postBody(
					'user/userOpen/register', postData,
					function(res) {
						console.log(res, 'res23456787654')
						const {
							data
						} = res;
						// 设置token
						uni.setStorageSync('token', data.token);
						uni.setStorageSync('userId', data.loginUserVo.userId);
						// 清除shopUserId
						uni.setStorageSync('shopUserId', '')
						uni.showToast({
							title: data.msg,
							duration: 2000
						});
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/user/index/index'
							})
						}, 2500)
					}
				);
			}
		}
	}
</script>

<style scoped lang="scss">
	.plantingMain {
		height: 100vh;
		background: #fff;
		padding: 20rpx;
	}

	.plantingMain .title {
		font-size: 30rpx;
		color: black;
		padding: 20rpx 10rpx;
		height: 50rpx;
	}

	.textView {
		margin: 20rpx;
		border-bottom: 2rpx solid #ddd;

		.label {
			margin-bottom: 10rpx;

		}
	}

	.textTitle {
		font-size: 28rpx;
		color: #9f9f9f;
	}

	.mainItem {
		height: 80rpx;
		color: #fff;
		background: #19a352;
		line-height: 80rpx;
		font-size: 29rpx;
		text-align: center;
		margin-top: 50rpx;
		border-radius: 10rpx;

	}

	.trafficker_list_bottom {
		display: flex;
		align-items: center;

		input {
			width: 100%;
		}

		.trafficker_list_tel_text {
			width: 30rpx;
			font-size: 28rpx;
			color: #000;
		}
	}

	.bottom-text {
		font-size: 24rpx;
		color: #666;
		margin: 10rpx 0;
		margin-left: 40rpx;
	}
</style>